<template>
    <div id="box">
        <div class="meHead">
            <h4>我的</h4>
        </div>
        <noLogined @isLogin="isLogin" v-if="user==''" :name="'我的'"></noLogined>
        <meInfo @updateSuc="updateSuc" @isLogout="isLogout" :user="user" v-if="user!=''"></meInfo>
    </div>
</template>

<script>
    import noLogined from '../subComs/noLogined.vue'
    import meInfo from './meInfo.vue'
    export default {
        data(){
          return {
              user:''
          }
        },
        methods:{
            getUser(){
                this.user = this.$store.state.user ? this.$store.state.user :''
            },
            isLogin(){
                this.getUser()
            },
            isLogout(){
                this.user = this.$store.state.user = ''
            },
            updateSuc(){
                this.getUser()
            }
        },
        components:{
            noLogined,meInfo
        },
        created() {
            this.getUser();
        },
    }
</script>

<style lang="less" scoped>
    #box{
        display: flex;
        flex-direction: column;
        .meHead{
            background-color: #FFCA0D;
            height: 80px;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

</style>